import { useSelector, useDispatch } from "react-redux"
import { setAge, resetData } from "../../store/modules/test1Store"
import { Button } from "antd"

function Demo4() {
    // 1.使用数据：useSelector从redux中获取模块test1的数据
    const { name, age } = useSelector((state) => state.test1)

    // 2.修改数据：dispatch触发action，action触发reducer，reducer修改state
    const dispatch = useDispatch()
    const changeName = () => {
        dispatch(setAge())
    }
    const handleResetData = () => {
        dispatch(resetData())
    }

    return (
        <div className="main_box">
            <h1>本案例展示 redux使用方式</h1>

            <div className="main_row">
                <div>
                    展示redux数据： name-{name} age-{age}
                    <Button onClick={() => changeName()} type="primary">
                        修改redux-age
                    </Button>
                    <Button onClick={() => handleResetData()} type="primary">
                        重置redux数据
                    </Button>
                </div>

                <div className="main_text">
                    <p>1.使用数据：通过useSelector从redux中获取模块xxxx的数据 </p>
                    <p>2.修改数据：通过useDispatch调用redux的action触发reducer </p>
                </div>
            </div>
        </div>
    )
}

export default Demo4
